import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import * as React from "react";
import { Col, Menu, Row } from "antd";
import { Link, Route, RouteProps, Router, Switch } from "react-router-dom";
import DoctorCheck from "./DoctorCheck";
import HospitalCheck from "./HospitalCheck";

const styles = (theme: Theme) =>
  createStyles<"root" | "menubg" | "rightContent">({
    root: {},
    menubg: {
      borderRadius: "5px",
      marginTop: "10px",
      minHeight: "54vh",
      backgroundColor: "rgb(255,255,255)",
      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
      borderColor: "rgba(0, 0, 0, 0.09)",
      "& li:after": {
        border: "0px"
      }
    },
    rightContent: {
      margin: "10px 0 0 20px"
    }
  });

interface Iprops extends WithStyles<typeof styles> {}

/**
 * 描述：
 *  医疗资源
 * @author sunshixiong
 * @date 2019/3/18-15:15
 */
const MedicalResource = (props: Iprops) => {
  return (
    <Row type={"flex"} justify={"center"} className={props.classes.root}>
      <Col span={18} style={{ marginRight: 10 }}>
        <Row>
          <Col span={4}>
            <div className={props.classes.menubg}>
              <Menu style={{ width: "100%" }} mode="inline">
                <Menu.Item key="1">
                  <Link to={"/medical-resource/hospital"}>医院信息</Link>
                </Menu.Item>
                <Menu.Item key="2">
                  <Link to={"/medical-resource/doctor"}>医生信息</Link>
                </Menu.Item>
              </Menu>
            </div>
          </Col>
          <Col span={20}>
            <div className={props.classes.rightContent}>
              <Switch>
                <Route<RouteProps>
                  component={DoctorCheck}
                  path={"/medical-resource/doctor"}
                  exact={true}
                />
                <Route<RouteProps>
                  component={HospitalCheck}
                  path={"/medical-resource/hospital"}
                  exact={true}
                />
              </Switch>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default withStyles(styles)(MedicalResource);
